# 模块热更新

模块热更新（HMR - hot module replacement）功能会在应用程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

- 保留在完全重新加载页面期间丢失的应用程序状态。

- 只更新变更内容，以节省宝贵的开发时间。

- 在源代码中 CSS / JS 产生修改时，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。

## HMR 开关

`EMP` 已内置了对 HMR 的支持，在开发环境下默认启用。

如果你不需要使用 HMR 能力，可以将 `server.hot` 设置为 false，此时热更新和 react-refresh 将被禁用，`EMP` 会自动降级到 server.liveReload (是否重新加载页面。当开启 hot 时候该配置项会被关闭。)。

```js title="emp-config.js"
export default {
	server: {
		hot: false
	}
}
```

如果你需要同时禁用 HMR 和 liveReload，可以将 `server.hmr` 和 `server.liveReload` 都设置为 false，此时页面上不会发起 Web Socket 请求到 dev server，也不会在文件变更时自动刷新页面。

```js title="emp-config.js"
export default {
	server: {
		hot: false,
		liveReload: false
	}
}
```

## 自定义 HMR URL

在默认情况下，`EMP` 使用当前页面的 host 和端口号来拼接 HMR 对应的 WebSocket URL。

当出现 HMR 连接失败的情况时，你可以通过自定义 `server.host` 和 `server.port` 配置的方式来指定 WebSocket URL。

### 默认配置

默认配置如下，`EMP` 会根据当前页面的 location 自动推导 WebSocket 请求的 URL：

```js title="emp-config.js"
export default {
	server: {
		// 默认设置为 dev server 的端口号
		port: '',
		host: location.hostname
	}
}
```

